<template>
  <div class="menu-page">
    <van-cell-group>
      <!-- 模拟菜单数据 - 后续需要替换为API获取的真实数据 -->
      <van-cell
        v-for="(item, index) in menuItems"
        :key="index"
        :title="item.title"
        :icon="item.icon"
        is-link
        @click="handleMenuClick(item)"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 模拟菜单数据 - 后续需要替换为API获取的真实数据
const menuItems = ref([
  {
    id: 1,
    title: '个人中心',
    icon: 'user-o',
    path: '/user'
  },
  {
    id: 2,
    title: '消息通知',
    icon: 'comment-o',
    path: '/notifications'
  },
  {
    id: 3,
    title: '系统设置',
    icon: 'setting-o',
    path: '/settings',
    // TODO: 待后端提供真实数据后替换
    // 当前为模拟数据，实际应从接口获取
    // api: '/api/settings/menu'
  }
])


const handleMenuClick = (item) => {
  router.push(item.path)
}
</script>

<style scoped>
.menu-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

</style>
